﻿$(document).ready(function() {
    startTopSlider();
    startBotSlider();
});
var imgPos = 1;
var t;
function startTopSlider() {
    initSlideHTML(1);
    $(".iPreviewLine").click(function() {
        clearTimeout(t);
        $("#dTopSlide_Rewrite div:nth-child(2) span").stop(true, true);
        $("#dTopSlide_Rewrite div:nth-child(2) span").css({ "margin": "0px 0px 0px 0px", "opacity": "1" });
        initSlideHTML(imgPos - 1 <= 0 ? $("#dTopSlide_Img img").length : imgPos - 1);
    });
    $(".iNextLine").click(function() {
        clearTimeout(t);
        $("#dTopSlide_Rewrite div:nth-child(2) span").stop(true, true);
        $("#dTopSlide_Rewrite div:nth-child(2) span").css({ "margin": "0px 0px 0px 0px", "opacity": "1" });
        initSlideHTML(imgPos < $("#dTopSlide_Img img").length ? imgPos + 1 : 1);
    });
    $(".ulCircle a:eq(0)").click(function() { changeSlide(1); });
    $(".ulCircle a:eq(1)").click(function() { changeSlide(2); });
    $(".ulCircle a:eq(2)").click(function() { changeSlide(3); });
    $(".ulCircle a:eq(3)").click(function() { changeSlide(4); });
    $(".ulCircle a:eq(4)").click(function() { changeSlide(5); });
}
function changeSlide(pos) {
    if (imgPos != pos) {
        $(".ulCircle a:eq(" + (imgPos - 1) + ")").removeClass("aCirlce_focus");
        $(".ulCircle a:eq(" + (pos - 1) + ")").addClass("aCirlce_focus");
        clearTimeout(t);
        $("#dTopSlide_Rewrite div:nth-child(2) span").stop(true, true);
        $("#dTopSlide_Rewrite div:nth-child(2) span").css({ "margin": "0px 0px 0px 0px", "opacity": "1" });
        initSlideHTML(pos);
    }
}
function initSlideHTML(pos) {
    var slideHTML = "";
    var imgSrc = $("#dTopSlide_Img img:nth-child(" + pos + ")").attr("src");
    if (pos != 1 || $('#dTopSlide_Rewrite').html().length != 0) {
        var randomStruc = Math.ceil(Math.random() * 8);
        $(".ulCircle a:eq(" + (imgPos - 1) + ")").removeClass("aCirlce_focus");
        imgPos = pos;
        $(".ulCircle a:eq(" + (pos - 1) + ")").addClass("aCirlce_focus");
        switch (randomStruc) {
            case 1:
                slideHTML += "<div class='scanFadeIn_effect'>";
                var jumpPos = -112;
                for (var i = 0; i < 10; i++) {
                    slideHTML += "<p><span style='background:url(" + imgSrc + ") " + (i * jumpPos) + "px 0;'></span></p>";
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 1);
                break;
            case 2:
                slideHTML += "<div class='marginTop80_effect'>";
                var jumpPos = -14;
                for (var i = 0; i < 80; i++) {
                    if (i % 2 == 0) {
                        slideHTML += "<p><span style='background:url(" + imgSrc + ") " + (i * jumpPos) + "px 0;margin-top:300px;'></span></p>";
                    }
                    else {
                        slideHTML += "<p><span style='background:url(" + imgSrc + ") " + (i * jumpPos) + "px 0;margin-top:-300px;'></span></p>";
                    }
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 2);
                break;
            case 3:
                slideHTML += "<div class='marginLeft80_effect'>";
                var jumpPos = -14;
                for (var i = 0; i < 80; i++) {
                    if (i % 2 == 0) {
                        slideHTML += "<p><span style='background:url(" + imgSrc + ") " + (i * jumpPos) + "px 0;margin-left:14px;'></span></p>";
                    }
                    else {
                        slideHTML += "<p><span style='background:url(" + imgSrc + ") " + (i * jumpPos) + "px 0;margin-left:-14px;'></span></p>";
                    }
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 2);
                break;
            case 4:
                slideHTML += "<div class='marginLeft30_effect'>";
                var jumpPos = -10;
                var randomMargin = Math.ceil(Math.random() * 2);
                for (var i = 0; i < 30; i++) {
                    if (i % 2 == 0) { slideHTML += "<p><span style='background:url(" + imgSrc + ") 0 " + (i * jumpPos) + "px;margin-left:1120px;'></span></p>"; }
                    else { slideHTML += "<p><span style='background:url(" + imgSrc + ") 0 " + (i * jumpPos) + "px;margin-left:-1120px;'></span></p>"; }
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 2);
                break;
            case 5:
                slideHTML += "<div class='marginTop30_effect'>";
                var jumpPos = -10;
                var randomMargin = Math.ceil(Math.random() * 2);
                for (var i = 0; i < 30; i++) {
                    if (i % 2 == 0) {
                        slideHTML += "<p><span style='background:url(" + imgSrc + ") 0 " + (i * jumpPos) + "px;margin-top:10px;'></span></p>";
                    }
                    else {
                        slideHTML += "<p><span style='background:url(" + imgSrc + ") 0 " + (i * jumpPos) + "px;margin-top:-10px;'></span></p>";
                    }
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 2);
                break;
            case 6:
                slideHTML += "<div class='blockFade_effect'>";
                var jumpPos = -80;
                var linePos = 0;
                var blockNo = 0;
                for (var i = 0; i < 70; i++) {
                    if (i % 14 == 0) {
                        linePos = (i / 14) * -60;
                        blockNo = 0;
                    }
                    slideHTML += "<p><span style='background:url(" + imgSrc + ")" + (blockNo * jumpPos) + "px " + linePos + "px;'></span></p>";
                    blockNo++;
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 4);
                break;
            case 7:
                slideHTML += "<div class='block_effect'>";
                var jumpPos = -112;
                var linePos = 0;
                var blockNo = 0;
                for (var i = 0; i < 30; i++) {
                    if (i % 10 == 0) {
                        linePos = (i / 10) * -100;
                        blockNo = 0;
                    }
                    slideHTML += "<p><span style='background:url(" + imgSrc + ")" + (blockNo * jumpPos) + "px " + linePos + "px;'></span></p>";
                    blockNo++;
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 3);
                break;
            case 8:
                slideHTML += "<div class='blockDrop_effect'>";
                var jumpPos = -80;
                var linePos = 0;
                var blockNo = 0;
                for (var i = 0; i < 70; i++) {
                    if (i % 14 == 0) {
                        linePos = (i / 14) * -60;
                        blockNo = 0;
                    }
                    slideHTML += "<p><span style='background:url(" + imgSrc + ")" + (blockNo * jumpPos) + "px " + linePos + "px;margin-top:" + (linePos - 60) + "px'></span></p>";
                    blockNo++;
                }
                slideHTML += "</div>";
                $('#dTopSlide_Rewrite').append(slideHTML);
                effectIn(pos, 4);
                break;
        }
    }
    else {
        slideHTML += "<div class='scanFadeIn_effect'>";
        var jumpPos = -112;
        for (var i = 0; i < 10; i++) {
            slideHTML += "<p><span style='background:url(" + imgSrc + ") " + (i * jumpPos) + "px 0;opacity:1;'></span></p>";
        }
        slideHTML += "</div>";
        $('#dTopSlide_Rewrite').append(slideHTML);
        t = setTimeout(function() { initSlideHTML(pos + 1); }, 2000);       
    }
}
function effectIn(pos, type) {
    if ($("#dTopSlide_Rewrite div").length >= 3) {
        $("#dTopSlide_Rewrite div:nth-child(1)").remove();
    }
    var delayTime = 0;
    var orderArr = generateArr($("#dTopSlide_Rewrite div:nth-child(2) span").length);
    switch (type) {
        case 1:
            var time = 1000;
            for (var i = 0; i <= orderArr.length; i++) {
                $("#dTopSlide_Rewrite div:nth-child(2) span:eq(" + orderArr[i] + ")").delay(((time / 30) * i)).animate({ "opacity": "1" }, time);
            }
            delayTime = (time / 30) * i + time;
            break;
        case 2:
            var time = 500;
            for (var i = 0; i <= orderArr.length; i++) {
                $("#dTopSlide_Rewrite div:nth-child(2) span:eq(" + orderArr[i] + ")").delay(((time / 50) * i)).animate({ "marginTop": "0px", "marginLeft": "0px" }, time);
            }
            delayTime = (time / 50) * i + time;
            break;
        case 3:
            var time = 500;
            //var arr1 = generateArr($("#dBanner_slide div:nth-child(2) span").length).sort(randomSort);
            for (var i = 0; i <= orderArr.length / 3; i++) {
                $("#dTopSlide_Rewrite div:nth-child(2) span:eq(" + orderArr[i] + ")").delay(time / 10 * i).animate({ "width": "112px", "height": "100px", "opacity": "1" }, time);
                $("#dTopSlide_Rewrite div:nth-child(2) span:eq(" + orderArr[i + 10] + ")").delay((time / 10 * i) + 50).animate({ "width": "112px", "height": "100px", "opacity": "1" }, time);
                $("#dTopSlide_Rewrite div:nth-child(2) span:eq(" + orderArr[i + 20] + ")").delay((time / 10 * i) + 100).animate({ "width": "112px", "height": "100px", "opacity": "1" }, time);
            }
            delayTime = time / 10 * i + 100 + time;
            break;
        case 4:
            var time = 150;
            var arr1 = generateArr($("#dTopSlide_Rewrite div:nth-child(2) span").length).sort(randomSort);
            for (var i = 0; i <= arr1.length; i++) {
                $("#dTopSlide_Rewrite div:nth-child(2) span:eq(" + arr1[i] + ")").delay(time / 10 * i).animate({ "marginTop": "0px", "opacity": "1" }, time);
            }
            delayTime = time / 10 * i + time;
            break;
    }
    t = setTimeout(function() { initSlideHTML(pos < $("#dTopSlide_Img img").length ? pos + 1 : 1); }, delayTime + 2000);
}
function generateArr(length) {
    var resultArr = new Array();
    var typeArr = Math.ceil(Math.random() * 2);
    for (var i = 0; i < length; i++) {
        resultArr[i] = i;
    }
    return typeArr == 2 ? resultArr.reverse() : resultArr;
}
function randomSort(a, b) {
    return (parseInt(Math.random() * 30));
}
var botPos = 0;
var r;
function startBotSlider() {
    r = setTimeout("autoBotSlider()", 3500);
    $('.aPreviewProject').click(function() {

        changeSlideBot("pre");
    });
    $('.aNextProject').click(function() {

        changeSlideBot("next");
    });
}
function autoBotSlider() {
    botPos = botPos < $('#ulBotSlide li').length - 1 ? botPos + 1 : 0; 
    $('#ulBotSlide').animate({ "marginLeft": botPos * -586 + "px" }, 1000);
    r = setTimeout("autoBotSlider()", 3500);
}
function changeSlideBot(nav) {
    clearTimeout(r);
    $('#ulBotSlide').stop();
    switch (nav) {
        case "pre":
            botPos = botPos > 0 ? botPos - 1 : $('#ulBotSlide li').length - 1;
            $('#ulBotSlide').animate({ "marginLeft": botPos * -586 + "px" }, 1000);
            break;
        case "next":
            botPos = botPos < $('#ulBotSlide li').length - 1 ? botPos + 1 : 0;
            $('#ulBotSlide').animate({ "marginLeft": botPos * -586 + "px" }, 1000);
            break;
    }
    r = setTimeout("autoBotSlider()", 3500);
}